<template>
    <ul id="nav">
        <li style="position: relative">
            <a @click="back">
                首页
            </a>
            <div class="searched"></div>
        </li>
        <li id="top" @mouseenter='showEnter' @mouseleave="showLeave">
            <a href="#" id="courseImg">
                课程分类
                <img src="../images/下箭头.png" alt="">
            </a>
        </li>
        <li><a href="#">
            专属课程
        </a></li>
        <ul id="courseId" v-show="flag" @mouseenter='showEnter' @mouseleave="showLeave">
            <li v-for='(item,index) in list' :key="index">
                <a :href="getHref(item.subjectId)">
                    {{item.subjectTitle}}
                </a>
            </li>
        </ul>
    </ul>
</template>

<script>
    import {dropList} from "../api/api";

    export default {
        name: "Nav",
        data(){
            return {
                list: [],
                flag: false,
            }
        },
        created() {
            //下拉列表
            dropList().then(res => {
                console.log(this.$route.path)
                this.list = res.data.rows
            })
        },
        methods:{

            showEnter() {
                this.flag = true;
            },
            showLeave() {
                this.flag = false;
            },
            back(){
                if(this.$route.path != '/myIndex/index'){
                    this.$router.replace({ path: '/myIndex/index'})
                }
            },
            getHref: function (val) {
                return "search.html?subjectId=" + val + "&keyword=" + this.value + "&courseType=&type="
            },
        }

    }
</script>

<style scoped>
    /* 课程分类开始 */
    #nav {

        float: left;
        width: 276px;
        position: relative;
        margin-bottom: 0!important;
        background-color: white;
        /*z-index: 30;*/
    //margin-top: 30px;
        /* overflow: hidden; */
    }
    #nav>li {
        padding: 10px 30px 10px 0;
        float: left;
    }
    #nav>li>a{
        color: #00cf8c;
        font-size: 16px!important;
        color: black;
    }
    #nav>li:nth-child(1){
        position: relative;
    }
    #nav>li:nth-child(1)>a{
        box-sizing: border-box;
        color: #00cf8c;
    }
    #nav>li:hover>a{
        color: #00cf8c;
        cursor: pointer;
    }
    >>>#courseId {
        position: absolute;
        background-color: white;
        top: 40px;
        left: 60px;
        padding: 0;
        width: 136px;
        font-size: 14px;
        /* display: none; */
        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
        z-index: 10;
    }
    #courseId>li {
        padding: 5px 12px;
    }
    #courseId>li>a {
        display: block;
        width: 100%;
        height: 100%;
        color: rgba(0, 0, 0, .65);
    }
    #courseId>li>a:visited{
        color: rgba(0, 0, 0, .65);
    }
    #courseId>li:hover {
        cursor: pointer;
        background-color: #e6fff3;
    }
    #courseId>li:hover>a{
        color: #00cf8c!important;
    }
    /* 课程分类结束 */
</style>